<template>
  <div class="app-container">
    <dv-full-screen-container>
      <dv-loading v-if="false">Loading...</dv-loading>
      <dv-border-box-11 title="大数据平台">
        <div class="container">
          <div class="top flex" :style="{ height: height / 10 + 'px' }">
            <div class="item">
              <dv-border-box-7>
                <p class="title">设备总数</p>
                <dv-digital-flop :config="config5" style="width:100%;height:50px;" />
              </dv-border-box-7>
            </div>
            <div class="item">
              <dv-border-box-7>
                <p class="title">正常运行总数</p>
                <dv-digital-flop :config="config5" style="width:100%;height:50px;" />
              </dv-border-box-7>
            </div>

            <div class="item">
              <dv-border-box-7>
                <p class="title">异常数量</p>
                <dv-digital-flop :config="config5" style="width:100%;height:50px;" />
              </dv-border-box-7>
            </div>

            <div class="item">
              <dv-border-box-7>
                <p class="title">维修次数</p>
                <dv-digital-flop :config="config5" style="width:100%;height:50px;" />
              </dv-border-box-7>
            </div>

            <div class="item">
              <dv-border-box-7>
                <p class="title">报警次数</p>
                <dv-digital-flop :config="config5" style="width:100%;height:50px;" />
              </dv-border-box-7>
            </div>

          </div>
          <div class="main">
            <div class="left">
              <div class="item">
                <dv-border-box-8 :style="{ height: height * 0.23 + 'px' ,padding:5+'px' }">
                  <dv-active-ring-chart :config="config3" style="width:98%;height:98%;" />
                </dv-border-box-8>
              </div>
              <div class="item">
                <dv-border-box-8 :reverse="true" :style="{ height: height * 0.23 + 'px',padding:5+'px'  }">
                  <dv-capsule-chart :config="config3" style="width:98%;height:98%;" />
                </dv-border-box-8>
              </div>
              <div class="item">
                <dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:5+'px' }">
                  <dv-conical-column-chart :config="config3" style="width:98%;height:98%;" />
                </dv-border-box-8>
              </div>
            </div>
            <div class="middle">
              <dv-border-box-8 :reverse="true" :style="{ height: height * 0.70 + 'px',}">
                <mapview></mapview>
                <!-- <div id="yzMap">1111</div> -->
                    <!-- <span class="deviceTitle">设备维修完成情况</span> -->
              </dv-border-box-8>
            </div>
            <div class="right">
              <div class="item">
                <dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:1+'%'  }">
                  <div class="flexCenter" style="width: 98%;height:98%">
                    <span class="deviceTitle">设备维修完成情况</span>
                    <span class="deviceSub">累计完成 <span style="color: #3ADEC4;">189</span>
                      件</span>
                    <dv-percent-pond :config="config1" style="width:50%;height:50%;" />
                  </div>
                </dv-border-box-8>
              </div>
              <div class="item">
                <dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:1+'%'  }">
                  <dv-scroll-board :config="config4" style="width:98%;height:98%;" />
                </dv-border-box-8>
              </div>
              <div class="item">
                <dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:1+'%'}">
                  <dv-scroll-ranking-board :config="config3" style="width:98%;height:98%;" />
                </dv-border-box-8>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
import mapview from './mapView'

export default {
  name: "Screen",

   components: {
    mapview,
  },
  data () {
    return {
      height: 0,
      config3: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
      },
      config4: {
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
        carousel: 'page'
      },
      config5: {
        number: [100],
        content: '{nt}个'
      },
      config1: {
        value: 45
      },
    }
  },
  mounted () {
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
  },
  methods: {
    // 获取计算高度
    setHeight () {
      this.height = window.innerHeight
    },
   
  }
};
</script>

<style scoped >
body {
  /* 建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。
  使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕 */
  margin: 0;
}
.app-container {
  width: 100%;
  height: 100vh;
  background: url(./pageBg.png);
  background-size: 100% 100%;
}
.dv-border-box-11 {
  position: absolute;
}
.container {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top {
  width: 100%;
  margin-top: 60px;
}
.top .title {
  font-size: 22px;
  color: #fff;
  text-align: center;
  margin: 10px 0;
}

.top .item {
  width: 20%;
  margin: 0 10px;
}

.main {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main .left {
  width: 24%;
}
.main .item {
  width: 100%;
  box-sizing: border-box;
}
.middle {
  width: 50%;
}
#map {
  width: 100%;
  height: 100%;
}

.main .right {
  width: 24%;
}

.return,
.screen {
  cursor: pointer;
}

.flexCenter {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.deviceTitle {
  color: #fff;
  font-size: 18px;
  letter-spacing: 5px;
}
.deviceSub {
  color: #cbcbcb;
  font-size: 16px;
}
#yzMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
}

::v-deep .tdt-control-container {
  display: none !important;
}
</style>